<template>
  <div class='container'>
    <el-dialog
      title="预览文章"
      :visible="showPreview"
      @close="$emit('update:showPreview', false)"
    >
      <div class="box">
        <div class="title">
          <h2>{{ articleDetail.title }}</h2>
        </div>
        <div class="articel-info">
          <span>{{ articleDetail.createTime | parseTimeByString }}</span
          >&nbsp; <span>{{ articleDetail.username }}</span> &nbsp;
          <span class="el-icon-view"></span>&nbsp;
          <span>{{ articleDetail.visits }}</span>
        </div>
        <div class="content" v-html="articleDetail.articleBody"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showPreview: {
      type: Boolean,
      default: false
    },
    articleDetail: {
      type: Object,
      required: true
    }
  }

}
</script>

<style scoped lang='scss'>
 .box {
    .title {
      h2 {
        margin: 0;
      }
    }
    .articel-info {
      padding: 10px;
    }
    .content {
      border-top: 1px dashed #ccc;
      background-color: #f5f5f5;
      padding: 10px;
      ::v-deep .ql-align-center {
        img {
          width: 100%;
        }
      }
    }
  }
</style>
